<template>
	<div id="audition_manage" class="container">
		<div class="content">
			<div class="title">{{title}}</div>
			<div class="condition">
				<el-select class="select" v-model="param.classStatusMode" 
					placeholder="班级状态" @change="search()" clearable>
				    <el-option v-for="item in classStatus" :key="item.value"
				      		   :label="item.name" :value="item.value">
				    </el-option>
				 </el-select>
				 
				 <el-select class="select" v-model="param.classroomId"
				 	placeholder="教室" @change="search()" clearable>
				    <el-option v-for="item in classroomList" :key="item.classroomId"
				      		   :label="item.name" :value="item.classroomId">
				    </el-option>
				 </el-select>
				 
				 <el-select class="select" v-model="param.teachUserId" 
				 	placeholder="教师" @change="search()" clearable>
				    <el-option v-for="item in userList" :key="item.userId"
				      		   :label="item.nickName" :value="item.userId">
				    </el-option>
				 </el-select>
				 
				<el-date-picker v-model="classTime" class="time_picker" @change="timeChange"
				    align="center"  unlink-panels range-separator="至"
				    start-placeholder="上课时间起" end-placeholder="上课时间止"
				    value-format= "yyyy-MM-dd" type="daterange">
				</el-date-picker>
    
				<el-input v-model="param.keyword" @input="search()" placeholder="搜索 班级名/课程" 
   				 	style="width: 3.15rem;" type="daterange" suffix-icon="el-icon-search">
  				</el-input>
				 
				 <div class="right_btn" @click="openAdd()">新建试听</div>
			</div>
			
			<div class="panel" v-for="item in auditionList">
				<div class="panel_top">
					<div class="panel_mark">{{item.classTypeMode==1? '线下':'线上'}}试听课</div>
					
					<div class="panel_btn signup_btn" @click="openEnroll(item)">报名</div>
					<div class="panel_btn delete_btn" v-if="[1,2].indexOf(item.classStatusMode)>=0" @click="openDelete(item)">删除</div>
					<div class="panel_btn attend_btn" @click="openAttend(item)">考勤</div>
				</div>
				
				<div class="panel_body">
					<div class="panel_one">
						<div>班级名称： <span class="panel_value_1">{{item.className}}</span></div>
						<div>课程名称： <span class="panel_value_2">{{item.courseName || item.syllabus.courseName}}</span></div>
						<div>上课时间： <span class="panel_value_2">{{item.syllabus.time}}</span></div>
						<div class="more_time" @click="openTimetable()">更多上课时间</div>
					</div>
					<div  class="panel_two">
						<div>教室： <span class="panel_value_2">{{item.syllabus.classRoomName}}</span></div>
						<div>教师： <span class="panel_value_2">{{item.syllabus.teacherUserName}}</span></div>
						<div>助教： <span class="panel_value_2">{{item.syllabus.assisUserName}}</span></div>
					</div>
					<div class="panel_three">
						<div>班级状态</div>
						<div class="status" style="color: #20adff;">{{classStatusMap[item.classStatusMode]}}</div>
					</div>
					<div class="panel_four">
						<div>班级学员</div>
						<div class="student_num">
							<span class="student_now">{{item.syllabus.studentNum || 0}}</span>/{{item.recruitNum}}
						</div>
						<div class="remark">已有学员/计划招生</div>
					</div>
				</div>
				
				<div class="panel_bottom">
					<div class="table_div" hidden>
						<table class="table" cellspacing="0">
							<thead class="thead">
								<tr>
									<td style="width: 3rem;">学员</td>
									<td style="width: 3rem;">年龄</td>
									<td style="width: 3rem;">联系电话</td>
									<td style="width: 3rem;">试听课时</td>
									<td style="width: 3rem;">考勤</td>
									<td style="width: 3rem;">操作</td>
								</tr>
							</thead>
							<tbody class="tbody">
								<tr v-for="stu in item.studentList">
									<td>{{stu.realName}}</td>
									<td>{{stu.age}}</td>
									<td>{{stu.phone}}</td>
									<td>{{stu.classHour}}</td>
									<td>{{signinMap[stu.signinMode]}}</td>
									<td>试听记录</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="bottom_btn" @click="showStudent($event,item)"></div>
				</div>
			</div>
			
			<!---->
			<el-pagination class="page"
		      layout="total, sizes, prev, pager, next, jumper"
		      :current-page="param.currPage"
		      :total="count"
		      @size-change="pageSizeChange"
		      @current-change="pageIndexChange">
		    </el-pagination>
			
		</div>
		
		<auditionAdd ref="auditionAdd" @callback="closeAdd"></auditionAdd>
		<auditionAttend ref="auditionAttend" @callback="closeAttend"></auditionAttend>
		<auditionDeleteHandle ref="auditionDeleteHandle" @callback="closeDeleteHandle"></auditionDeleteHandle>
		<auditionDelete ref="auditionDelete" @callback="closeDelete"></auditionDelete>
		<auditionEnroll ref="auditionEnroll" @callback="closeEnroll"></auditionEnroll>
		<auditionTimetable ref="auditionTimetable" @callback="closeTimetable"></auditionTimetable>
	</div>
</template>

<script>
	
import auditionAdd from './subpage/audition_add'
import auditionAttend from './subpage/audition_attend'
import auditionDeleteHandle from './subpage/audition_delete_handle'
import auditionDelete from './subpage/audition_delete'
import auditionEnroll from './subpage/audition_enroll'
import auditionTimetable from './subpage/audition_timetable'

var vm,dict;
export default {
	components : {
		auditionAdd,auditionAttend,auditionDeleteHandle,
		auditionDelete,auditionEnroll,auditionTimetable
	},
	data : function() {
		return {
			title : this.$route.name,
			param : {
				keyword : "",
				startTime : "",
				endTime : "",
				classroomId : "",
				teachUserId : "",
				classStatusMode : "",
				campusId : this.$store.state.campusId,
				pageSize : 10,
				currPage : 1,
			},
			//下拉列表数据
			userList : null,
			classroomList : null,
			classStatus : null,
			classStatusMap : null,
			signinMap : null,
			
			count : null,
	        classTime: null,
	        auditionList : null,
	        statusColor : {
	        	"1": "#dddedf", //未开始:灰色
	        	"2": "#20adff", //进行中:蓝色
	        	"3": "#80cc29", //已结课:绿色
	        	"4": "#80cc29", //提前结课:绿色
	        }
		}
	},
	methods : {
		search : function() {
			api.auditionList(vm.param).then(function(data) {
				//赋上这个属性,才会双向绑定
				data.list.forEach(function(item) {
					item.studentList = null;
					//计算时间
					var c = item.nearTrialClassSyllabus || {};
					
					if(c && c.startTime) {
						c.time = c.startTime+"~"+c.endTime.substring(11);
					}
					
					item.syllabus = c;
				})
				
				vm.auditionList = data.list;
				vm.count = data.totalCount;
			});
			//将展开的学生列表收起,列表数据重新加载
			$(".table_div").hide();
			$(".bottom_btn").removeClass("bottom_btn_up");
		},
		campusChange : function(campusId) { //校区改变
			vm.param.campusId = campusId;
			vm.search();
			vm.loadList();
		},
		timeChange : function(time) {
			if(!time) {
				time = ["",""];
			}
			vm.param.startTime = time[0] + " 00:00:00";
			vm.param.endTime = time[1]+ " 23:59:59";
			vm.search();
		},
		showStudent : function(event,audition) {
			
			//当前没学员,不做任何处理
			if(audition.studentNum == 0) {
				tool.message({showClose: true, message: "该班级当前没有学员", type: 'warning'});
				return;
			}
			
			//学生列表不存在,初次打开,加载
			if(!audition.studentList) {
				var param = {
					classId : audition.classId,
					classSyllabusId : audition.syllabus.classSyllabusId
				}
				api.auditionStudent(param).then(function(data) {
					audition.studentList = data.list;
				});
			}
			
			var $btn = $(event.currentTarget);
			var $table = $btn.prev();
//			var $table = $(event.currentTarget).parent().next();
			if($table.css("display")=="none") {
				$table.slideDown();
				$btn.addClass("bottom_btn_up");
			} else {
				$table.slideUp();
				$btn.removeClass("bottom_btn_up");
			}
		},
		pageSizeChange : function(val) { //页条数发生改变
	  		vm.param.pageSize = val;
	    	vm.search();
	  	},
	  	pageIndexChange : function(val) { //页码发生改变
	    	vm.param.currPage = val;
	    	vm.search();
	  	},
		openAdd : function() {
			vm.$refs.auditionAdd.init();
		},
		closeAdd : function(data) {
			vm.search();
		},
		openAttend : function(audition) {
			//当前没学员,不做任何处理
			if(audition.studentNum == 0) {
				tool.message({showClose: true, message: "该班级当前没有学员", type: 'warning'});
				return;
			}
			
			vm.$refs.auditionAttend.init(audition);
		},
		closeAttend : function(data) {
			
		},
		openDelete : function(audition) {
			
			if(audition.studentNum == 0) {
				vm.$refs.auditionDelete.init(0,audition.classId);
			} else {
				//班级带有学生,先进行转班处理
				vm.$refs.auditionDeleteHandle.init(audition);
			}
		},
		closeDelete : function(data) {
			vm.search();
		},
		closeDeleteHandle : function(data) {
			vm.$refs.auditionDelete.init(1);
		},
		openEnroll : function(audition) {
			//判断是否有课节对象,没有则不进入报名界面
			if(audition.nearTrialClassSyllabus) {
				vm.$refs.auditionEnroll.init(audition);
			} else {
				tool.message({showClose: true, message: "当前尚无课节安排，请先排课", type: 'warning'});
			}
			
		},
		closeEnroll : function() {
			vm.search();
		},
		openTimetable : function() {
			vm.$refs.auditionTimetable.init();
		},
		closeTimetable : function() {
			
		},
		loadList : function() {
			var campusId = vm.$store.state.campusId;
			
			//用户列表
			vm.param.teachUserId = "";
			api.userListByCampus({campusId : campusId}).then(function(data) {
				vm.userList = data.userList;
			});
			//教室列表
			vm.param.classroomId = "";
			api.getClassroomList({campusId : campusId}).then(function(data) {
				vm.classroomList = data.info;
			});
		}
	},
	mounted : function() {
	},
	created : function() {
		vm = this;
		dict = tool.getItem(lsKey.dict,true);
		vm.classStatus = dict["class_status_mode"];
		vm.classStatusMap = tool.parseDict(dict["class_status_mode"]);
		vm.signinMap = tool.parseDict(dict["signin_mode"]);
		
		vm.search();
		//后台加载下拉列表
		vm.loadList();
		
	}
}
</script>

<style lang="scss">
	#audition_manage {
		.el-input__inner {
			border-radius: 0.08rem;
			font-size: 0.16rem;
			color: #666666;
			height: 0.36rem;
			line-height: 0.36rem;
		}
		.el-input__icon {
			line-height: 0.36rem;
		}
		
		.el-range-editor {
			padding: 0 0.05rem 0 0.1rem;
		}
		.el-range-separator {
			padding: 0 ;
			width : 10% ;
			line-height: 0.34rem;
			color: #666666;
		}
		.el-range-input {
			font-size: 0.16rem;
			color: #666666;
			height: 0.3rem;
		    position: relative;
		    top: 0.01rem;
		}
	}
</style>
<style scoped src="@/style/module/table.css"></style>
<style scoped src="@/style/clue_manage/audition_manage.css"></style>
<style scoped>
	.table {
		border-top: 0;	
	}
</style>